<template>
    <div class="main">
        <!-- 头部区域 -->
        <home-header></home-header>
        <!-- 主题区域 -->
        <main-box>
            <!-- 左边那一列 -->
            <template #left>
                <left-column></left-column>
            </template>
            <!-- 中间那一列 -->
            <template #center>
                <center-column></center-column>
            </template>
            <!-- 右边那一列 -->
            <template #right>
                <right-column></right-column>
            </template>
        </main-box>
    </div>
</template>

<script>
    import HomeHeader from './homeChild/HomeHeader'
    import MainBox from './homeChild/MainBox'
    import LeftColumn from './homeChild/LeftColumn'
    import CenterColumn from './homeChild/CenterColumn'
    import RightColumn from './homeChild/RightColumn'
    export default {
        name: 'Home',
        components: {
            HomeHeader,
            LeftColumn,
            CenterColumn,
            RightColumn,
            MainBox
        }
    }
</script>

<style scoped lang="less">
.main {
    height: 100%;
}
</style>